<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>商品管理</title>
    <link type="text/css" rel="stylesheet" href="/css/bootstrap.css">
    <link type="text/css" rel="stylesheet" href="/css/admin/materialdesignicons.min.css">
    <link href="/css/admin/style.min.css" rel="stylesheet">

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/js/layer.js"></script>
    <script type="text/javascript" src="https://daily-project.oss-cn-guangzhou.aliyuncs.com/bookmall/js/upload.js"></script>
    <script type="text/javascript" src="https://daily-project.oss-cn-guangzhou.aliyuncs.com/bookmall/js/validate.form.js"></script>
    <style>
        #myModal {
            padding-right: 320px !important;
            top: -27px !important;
        }

        .col-md-1 {
            width: 7.333333% !important;
        }
    </style>
</head>
<body>
<div class="container-fluid">

    <ul class="nav nav-tabs">
        <li
                <c:if test="${recommendType=='all'}">class="active"</c:if> >
            <a href="/bookmall/admin/books/all?pageNum=1">全部商品</a>
        </li>

        <li
                <c:if test="${recommendType=='scroll'}">class="active"</c:if> >
            <a href="/bookmall/admin/books/scroll?pageNum=1">条幅推荐</a>
        </li>

        <li
                <c:if test="${recommendType=='hot'}">class="active"</c:if> >
            <a href="/bookmall/admin/books/hot?pageNum=1">热销推荐</a>
        </li>

        <li
                <c:if test="${recommendType=='new'}">class="active"</c:if> >
            <a href="/bookmall/admin/books/new?pageNum=1">新品推荐</a>
        </li>
    </ul>

    <div class="table-responsive">
        <table class="table table-hover table-bordered" style="text-align: center" aria-describedby="bookTable">
            <tr>
                <th style="text-align: center">ID</th>
                <th style="text-align: center">图片</th>
                <th style="text-align: center">名称</th>
                <th style="text-align: center">作者</th>
                <th style="text-align: center">价格(元/本)</th>
                <th style="text-align: center">库存(本)</th>
                <th style="text-align: center">类目</th>
                <th style="text-align: center">操作</th>
            </tr>

            <c:forEach items="${page.list}" var="book">
                <tr>
                    <td>
                        <p>${book.id}</p>
                    </td>
                    <td>
                        <p>
                            <a href="javascript:void(0);">
                                <img src="${book.cover}" width="120px" height="120px" alt="cover">
                            </a>
                        </p>
                    </td>
                    <td>
                        <p>
                            <a href="javascript:void(0);">${book.name}</a>
                        </p>
                    </td>
                    <td>
                        <p>${book.author}</p>
                    </td>
                    <td>
                        <p>${book.price}</p>
                    </td>
                    <td>
                        <p>${book.stock}</p>
                    </td>
                    <td>
                        <p>${book.typeName}</p>
                    </td>
                    <td>
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary dropdown-toggle"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">推荐编辑
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li>
                                    <c:choose>
                                        <c:when test="${book.isscroll}">
                                            <a href="/bookmall/admin/book/edit/${book.id}?recommend=1&method=remove">
                                                <span class="mdi mdi-delete" aria-hidden="true"></span>移出条幅
                                            </a>
                                        </c:when>
                                        <c:otherwise>
                                            <a href="/bookmall/admin/book/edit/${book.id}?recommend=1&method=add">
                                                <span class="mdi mdi-library-plus" aria-hidden="true"></span>加入条幅
                                            </a>
                                        </c:otherwise>
                                    </c:choose>
                                </li>
                                <li>
                                    <c:choose>
                                        <c:when test="${book.ishot}">
                                            <a href="/bookmall/admin/book/edit/${book.id}?recommend=2&method=remove">
                                                <span class="mdi mdi-delete-empty" aria-hidden="true"></span>移出热销
                                            </a>
                                        </c:when>
                                        <c:otherwise>
                                            <a href="/bookmall/admin/book/edit/${book.id}?recommend=2&method=add">
                                                <span class="mdi mdi-book-plus" aria-hidden="true"></span>加入热销
                                            </a>
                                        </c:otherwise>
                                    </c:choose>
                                </li>
                                <li>
                                    <c:choose>
                                        <c:when test="${book.isnew}">
                                            <a href="/bookmall/admin/book/edit/${book.id}?recommend=3&method=remove">
                                                <span class="mdi mdi-delete" aria-hidden="true"></span>移出新品
                                            </a>
                                        </c:when>
                                        <c:otherwise>
                                            <a href="/bookmall/admin/book/edit/${book.id}?recommend=3&method=add">
                                                <span class="mdi mdi-new-box" aria-hidden="true"></span>加入新品
                                            </a>
                                        </c:otherwise>
                                    </c:choose>
                                </li>
                            </ul>
                        </div>


                        <button type="button" class="btn btn-danger" onclick="editBook(${book.id})">
                            <span class="mdi mdi-update" aria-hidden="true"></span>修改
                        </button>

                        <button type="button" class="btn btn-danger" onclick="deleteBook(${book.id})">
                            <span class="mdi mdi-delete-forever" aria-hidden="true"></span>删除
                        </button>
                    </td>
                </tr>
            </c:forEach>
        </table>
    </div>

    <!--分页-->
    <br>
    <c:choose>
    <c:when test="${!empty page.list}">
    <jsp:include page="./pagination.jsp">
        <jsp:param value="bookmall/admin/books" name="url"/>
        <jsp:param value="${recommendType}" name="param"/>
    </jsp:include>
    </c:when>

    <c:otherwise>
    <div style='text-align:center; color: #33cabb;'>暂无数据...</div>
    </c:otherwise>
    </c:choose>
    <br>

    <!--修改模态框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 900px; height: 635px">
                <div class="modal-header" style="height: 34px;">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" method="post" id="editBookForm">
                        <!--id-->
                        <input type="hidden" name="id" id="id">

                        <div class="form-group">
                            <label for="name" class="col-md-1 control-label">名称</label>
                            <div class="col-md-3">
                                <input type="text" class="form-control" name="name" id="bookName" autocomplete="off"
                                       required="required">
                                <small class="form-text" id="nameTip">请输入合理的书籍名称。</small>
                            </div>
                            <div class="form-group">
                                <label for="isbn" class="col-md-1 control-label">书号</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="isbn" id="isbn" autocomplete="off"
                                           required="required">
                                    <small class="form-text" id="isbnTip">请输入合理的国际标准书号</small>
                                </div>

                                <label for="author" class="col-md-1 control-label">作者</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="author" id="author" autocomplete="off"
                                           required="required">
                                    <small class="form-text" id="authorTip">请输入书籍对应的作者名</small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="publisher" class="col-md-1 control-label">出版社</label>
                            <div class="col-md-3">
                                <input type="text" class="form-control" name="publisher" id="publisher"
                                       autocomplete="off"
                                       required="required">
                                <small class="form-text" id="publisherTip">请输入书籍的出版社</small>
                            </div>
                            <div class="form-group">
                                <label for="typeId" class="col-md-1 control-label">类别</label>
                                <div class="col-md-3">
                                    <select class="form-control" id="typeId" name="typeId" size="1">
                                        <option value="0">请选择</option>
                                        <c:forEach items="${bookTypes}" var="type">
                                            <option value="${type.id}">${type.typeName}</option>
                                        </c:forEach>
                                    </select>
                                    <small class="form-text" id="typeIdTip">请选择书籍分类</small>
                                </div>

                                <label for="price" class="col-md-1 control-label">价格</label>
                                <div class="col-md-3">
                                    <input type="text" class="form-control" name="price" id="price" autocomplete="off"
                                           required="required">
                                    <small class="form-text" id="priceTip">请输入合理的书籍价格</small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="stock" class="col-md-1 control-label">库存</label>
                            <div class="col-md-3">
                                <input type="number" class="form-control" name="stock" id="stock" autocomplete="off"
                                       required="required">
                                <small class="form-text" id="stockTip">请输入合理的书籍库存</small>
                            </div>

                            <div class="form-group">
                                <label for="mark" class="col-md-1 control-label">介绍</label>
                                <div class="col-md-3">
                                    <textarea type="text" class="form-control" name="mark" id="mark" rows="3"
                                              required="required" style="width: 501px;height: 77px"></textarea>
                                    <small class="form-text" id="markTip">请输入书籍简介</small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="cover" class="col-md-1 control-label">封面图片</label>
                            <div class="col-md-3">
                                <ul class="list-inline clearfix lyear-uploads-pic">
                                    <li class="col-md-2" style="height:200px; width: 200px;">
                                        <a id="coverAdd" class="pic-add" title="点击上传">
                                            <img src="" alt="封面图片" id="coverImg" height="200px;"
                                                 width="200px;">
                                        </a>
                                        <input type="hidden" name="cover">
                                        <input type="file" id="coverUpload" name="coverUpload"
                                               onchange="imageUpload('coverUpload')" />
                                    </li>
                                </ul>
                            </div>
                            <div class="form-group">
                                <label for="image1" class="col-md-1 control-label">详情图片1</label>
                                <div class="col-md-3">
                                    <ul class="list-inline clearfix lyear-uploads-pic">
                                        <li class="col-md-2" style="height:200px; width: 200px;">
                                            <a id="image1Add" class="pic-add" title="点击上传">
                                                <img src="" alt="封面图片" id="image1Img" height="200px;" width="200px;">
                                            </a>
                                            <input type="hidden" name="image1">
                                            <input type="file" id="image1Upload" name="image1Upload"
                                                   onchange="imageUpload('image1Upload')" />
                                        </li>
                                    </ul>
                                </div>

                                <label for="image2" class="col-md-1 control-label">详情图片2</label>
                                <ul class="list-inline clearfix lyear-uploads-pic">
                                    <li class="col-md-2" style="height:200px; width: 200px;">
                                        <a id="image2Add" class="pic-add" title="点击上传">
                                            <img src="" alt="封面图片" id="image2Img" height="200px;" width="200px;">
                                        </a>
                                        <input type="hidden" name="image2">
                                        <input type="file" id="image2Upload" name="image2Upload"
                                               onchange="imageUpload('image2Upload')" />
                                    </li>
                                </ul>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" onclick="submitBookForm()">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
    <script>
        /**
         * 修改
         * @param id
         */
        function editBook(id) {
            $('.modal-body').find('form').trigger('reset');

            $.get("/bookmall/admin/book/show/" + id, function (res) {
                $("#id").val(res.id);
                $("#bookName").val(res.name);
                $("#isbn").val(res.isbn);
                $("#author").val(res.author);

                $("#publisher").val(res.publisher);

                $("#price").val(res.price);
                $("#stock").val(res.stock);
                $("#mark").val(res.mark);
                $("#typeId").val(res.typeId);

                $("#coverAdd").attr("class", "");
                $("#coverImg").attr("src", res.cover);
                $("input[name='cover']").val(res.cover);

                $("#image1Add").attr("class", "");
                $("#image1Img").attr("src", res.image1);
                $("input[name='image1']").val(res.image1);

                $("#image2Add").attr("class", "")
                $("#image2Img").attr("src", res.image2);
                $("input[name='image2']").val(res.image2);
            });

            // 显示模态框
            $('#myModal').modal('show');
        }

        /**
         * 删除
         * @param id
         */
        function deleteBook(bookId) {
            layer.open({
                content: '是 否 要 删 除 该 商 品 信 息？',
                btn: ['是', '否'],
                yes: function (index, layero) {
                    $.get("/bookmall/admin/book/remove/" + bookId, function (res) {
                        if (res) {
                            layer.msg("该书籍信息已删除~", {icon: 1}, function () {
                                location.reload();
                            });
                        } else {
                            layer.msg("信息删除失败，请检查信息或后端代码是否完整", {icon: 2}, function () {
                                location.reload();
                            });
                        }
                    });
                },
                btn2: function (index, layero) {
                    layer.msg("已取消操作...", {icon: 2});
                },
                cancel: function () {
                }
            });
        }

        /*提交修改表单*/
        function submitBookForm() {
            if (validateBookEdit()) {
                $.post("/bookmall/admin/book/update", $("#editBookForm").serializeArray(), function (res) {
                    if (res) {
                        layer.msg("信息编辑成功~", {icon: 1}, function () {
                            $('#myModal').modal('hide');
                            window.parent.parent.document.getElementById("multitabs_books").contentWindow.location.reload(true);
                        });
                    } else {
                        layer.msg("信息编辑失败！请确认信息是否完整或联系管理员!", {icon: 2}, function () {
                            window.parent.parent.document.getElementById("multitabs_books").contentWindow.location.reload(true);
                        });
                    }
                });
            } else {
                layer.msg("请确认信息是否完整后再次提交！", {icon: 2}, function () {
                });
            }
        }
    </script>
</body>
</html>
